<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>在动态组件上使用 keep-alive</title>
    <script src="../public/vue2.7.14-dev.js"></script>
</head>
<body>
    
    <!-- 当在这些组件之间切换的时候，你有时会想保持这些组件的状态，以避免反复重新渲染导致的性能问题。
    这里可以用 <keep-alive> 标签对组件进行保持！！！ -->
    <div id="app">
        <button @click="iscur=!iscur">点击切换组件</button>
        <keep-alive>
            <component v-bind:is="iscur?'component-a':'component-b'"></component>
        </keep-alive>
    </div>

    <script>
        let componentA={
            template:`
            <div>
                <p>你的姓名：<input type="text"></p>
                <p>吃了饭没？：<input type="checkbox"></p>
                <p>你的喜爱程度：<input type="range" step="1" max="100" min="1"></p>
            </div>
            `
        }

        let componentB={
            template:`
            <div>
                你会注意到，如果你选择了一篇文章，切换到 Archive 标签，然后再切换回 Posts，是不会继续展示你之前选择的文章的。
                这是因为你每次切换新标签的时候，Vue 都创建了一个新的 currentTabComponent 实例。

                重新创建动态组件的行为通常是非常有用的，但是在这个案例中，我们更希望那些标签的组件实例能够被在它们第一次被创建的时候缓存下来。
                为了解决这个问题，我们可以用一个 keep-alive 元素将其动态组件包裹起来。
            </div>
            `
        }

        new Vue({
            el:"#app",
            components:{
                'component-a':componentA,
                'component-b':componentB
            },
            data(){
                return {
                    iscur:true
                }
            }
        })
    </script>
</body>
</html>